<template>
	<div id="contentMargin">
		<div class="bar" v-for="(item,index) in list">
			<mt-switch class="switch" v-model="value[index]"></mt-switch>
			<img class="imgs" :src="item.thumb_path" alt="">
			<div class="inforight">
				<h4 v-text="item.title"></h4>
				<div class="rbottom">
					<ul>
						<li>￥{{item.sell_price}}</li>
						<li>
							<carInput :initCount="item.cou" :goodsid="item.id" @carobjdataobj="getInputNum"></carInput>
						</li>
						<li>
							<a href="javascript:void(0)" @click="delrow(item.id,index)">删除</a>
						</li>
					</ul>

				</div>
			</div>
		</div>
		<div id="totle">
			<div id="desc">
				<ul>
					<li>总计（不含运费）</li>
					<li>已勾选商品{{totalCout}}件，总价：{{totalAmount}}￥</li>
				</ul>
			</div>
			<div id="button">
				<mt-button size="small" type="danger">去结算</mt-button>

			</div>

		</div>
	</div>
</template>
<script>
import common from '../../kits/common.js';
import { getgoodsObj, updateData, remoreItem } from '../../kits/localS.js';
import carInput from '../subcom/carInput.vue';
export default {
	components: {
		carInput
	},
	data() {
		return {
			value: [],
			totalAmount: 0,
			list: [
				{
					"cou": 1,
					"id": "87",
					"title": "加入购物商品1",
					"sell_price": 2195,
					"thumb_path": "../../../statics/imgs/img2.jpg",
				},
				{
					"cou": 1,
					"id": "88",
					"title": "加入购物商品2",
					"sell_price": 2345,
					"thumb_path": "../../../statics/imgs/img1.jpg",
				}
			]
		}
	},
	created() {
		// 临时数据
		var obj = getgoodsObj();
		this.list.forEach((item, index) => {
			if (obj[item.id] > 1) {
				item.cou = obj[item.id];
				// delrow(item.id, index);
			}
		});
		// this.getdatalist();
	},
	computed: {
		totalCout() {
			var trueArr = this.value.filter(item => {
				return item;
			});
			var amount = 0;
			this.value.forEach((item, index) => {
				if (item) {
					var count = this.list[index].cou;
					var price = this.list[index].sell_price;
					var itemamount = count * price;
					amount += itemamount;
				}

			})
			this.totalAmount = amount;
			return trueArr.length;
		}
	},
	methods: {
		delrow(goodsid, index) {
			console.log(goodsid, index);
			// 移除value  index
			this.value.splice(index, 1);
			// 移除list  index
			this.list.splice(index, 1);
			// 移除local  goodsid
			remoreItem(goodsid);
			console.log("rrrr")

		},
		getInputNum(resObj) {
			// 更新localstorage中的数据
			updateData(resObj);
			for (var i = 0; i < this.list.length; i++) {
				if (this.list[i].id == resObj.goodsid) {
					if (resObj.type == 'add') {
						this.list[i].cou++;
					} else {
						if (this.list[i].cou > 1) {
							this.list[i].cou--;
						}
						this.list[i].cou = 1;
					}
					break;
				}
			}
		},
		getdatalist() {
			var obj = getgoodsObj();
			var idstring = '';
			for (var key in obj) {
				idstring += key + ',';
			}
			idstring = idstring.substring(0, idstring.length - 1);
			var url = common.apidomain + 'api/..' + idstring;
			this.$http.get(url).then(res => {
				if (res.body.status != 0) {
					alert(res.body.message);
					return;
				}
				res.body.message.forEach(item => {
					item.cou = obj[item.id];
					this.value.push(false);
				});
				this.datalist = res.body.message;
			})
		}
	}
}
</script>
<style scoped>
.bar {
	height: 102px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.4);
	display: flex;
}

.switch {
	flex: 0 0 60px;
	margin-left: 10px
}

.imgs {
	width: 75px;
	height: 75px;
	flex: 0 0 85px;
	margin-left: 12px;
}

.inforight {
	flex: 1;
	margin-left: 12px;
}

.inforight ul {
	padding-left: 0;
}

.inforight li {
	list-style: none;
	display: inline-block;
}

.inforight h4 {
	color: #0094ff;
	font-size: 14px;
}

.rbottom li:first-child {
	color: red;
	margin-right: 12px
}

.rbottom li:last-child {
	margin-left: 12px;
}

#totle {
	background-color: rgba(0, 0, 0, 0.2);
	display: flex;
	padding: 5px;
	font-size: 14px;
}

#totle ul {
	padding-left: 0px;
}

#totle li {
	list-style: none;
}

#button {
	flex: 0 0 60px;
	margin: 20px 0 0 0;
}

#desc {
	flex: 1;
}
</style>